<template>
  <PageWrapper>
    <a-card>
      <div style="margin-bottom: 20px; padding: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col v-if="activeKey == 3" :xs="24" :sm="6">
              <a-form-item :label="t('sys.log.logerrorType')">
                <a-select allowClear :placeholder="t('sys.configuration.pleasechoose') + t('sys.log.logerrorType')" v-model:value="formState.value1">
                  <a-select-option
                    v-for="(item, index) in errorTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col v-if="activeKey == 2" :xs="24" :sm="6">
              <a-form-item :label="t('sys.configuration.scriptName')">
                <a-input allowClear :placeholder="t('sys.configuration.pleaseenter')+t('sys.configuration.scriptName')" v-model:value="formState.value4" />
              </a-form-item>
            </a-col>
            <a-col v-if="activeKey == 1" :xs="24" :sm="6">
              <a-form-item :label="t('sys.log.taskName')">
                <a-input allowClear :placeholder="t('sys.form.placeholder.taskName')" v-model:value="formState.value5" />
              </a-form-item>
            </a-col>
            <a-col v-if="activeKey == 1" :xs="24" :sm="6">
              <a-form-item :label="t('sys.accountList.school')">
                <a-input allowClear :placeholder="t('sys.configuration.pleaseenter') + t('sys.accountList.school')" v-model:value="formState.value6" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.code.status')">
                <a-select :placeholder="t('sys.form.placeholder.status')" allowClear v-model:value="formState.value3">
                  <a-select-option
                    v-for="(item, index) in statusSelectList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.errorLog.tableColumnDate')">
                <a-range-picker v-model:value="formState.value2" show-time />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button :icon="h(SearchOutlined)" type="primary"> {{ t('sys.form.placeholder.inquire') }} </a-button>
                <a-button> {{ t('sys.login.forget')  }} </a-button>
                <a-button @click="deleteCick" :icon="h(DeleteOutlined)" type="primary" danger
                  > {{ t('sys.configuration.delete') }} </a-button
                >
                <a-button @click="deleteAllCick" :icon="h(DeleteOutlined)" type="primary" danger
                  > {{ t('sys.configuration.deleteAll') }} </a-button
                >
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" :tab="t('sys.log.scriptLog')">
          <a-table
            @change="handleTableChange"
            :pagination="pagination"
            :row-selection="rowSelection"
            :loading="loading"
            bordered
            rowKey="id"
            :showExpandColumn="false"
            :columns="taskLogColumns"
            :dataSource="taskLogdataSource"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'action'">
                <a-button @click="detailsClick(record)" type="link"> {{ t('sys.configuration.particulars') }} </a-button>
                <a-popconfirm :title="t('sys.configuration.IsDelete')" :ok-text="t('sys.configuration.comfig')" :cancel-text="t('sys.configuration.cancel')">
                  <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
                </a-popconfirm>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" :tab="t('sys.log.taskLog')">
          <a-table
            @change="handleTableChange"
            :pagination="pagination"
            :loading="loading"
            :row-selection="rowSelection"
            bordered
            rowKey="id"
            :showExpandColumn="false"
            :columns="taskSeverColumns"
            :dataSource="taskSeverdataSource"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'status'">
                <a-tag v-if="record.status == 0" color="orange"> {{ t('sys.configuration.blockUp') }} </a-tag>
                <a-tag v-if="record.status == 1" color="green"> {{ t('sys.configuration.normal') }} </a-tag>
              </template>
              <template v-if="column.dataIndex === 'action'">
                <a-button @click="detailsClick(record)" type="link"> {{ t('sys.configuration.particulars') }} </a-button>
                <a-popconfirm :title="t('sys.configuration.IsDelete')" :ok-text="t('sys.configuration.comfig')" :cancel-text="t('sys.configuration.cancel')">
                  <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
                </a-popconfirm>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" :tab="t('sys.log.errroLog')">
          <a-table
            @change="handleTableChange"
            :pagination="pagination"
            :loading="loading"
            :row-selection="rowSelection"
            bordered
            rowKey="id"
            :showExpandColumn="false"
            :columns="taskErrorColumns"
            :dataSource="taskErrordataSource"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'status'">
                <a-tag v-if="record.status == 0" color="orange"> {{ t('sys.configuration.blockUp') }} </a-tag>
                <a-tag v-if="record.status == 1" color="green"> {{ t('sys.configuration.normal') }} </a-tag>
              </template>

              <template v-if="column.dataIndex === 'progress'"> 1/23 </template>
              <template v-if="column.dataIndex === 'action'">
                <a-button @click="detailsClick(record)" type="link"> {{ t('sys.configuration.particulars') }} </a-button>
                <a-popconfirm :title="t('sys.configuration.IsDelete')" :ok-text="t('sys.configuration.comfig')" :cancel-text="t('sys.configuration.cancel')">
                  <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
                </a-popconfirm>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, onMounted, h, UnwrapRef,Ref } from "vue";
  import { SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { PageWrapper } from '@/components/Page';
  import { taskLogColumns, taskErrorColumns, taskSeverColumns } from './account.data';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();
  const activeKey = ref('1');
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });

  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const deleteCick = () => {
    console.log(selectedRowKeyslist.value);
  };
  const deleteAllCick = () => {};
  const selectedRowKeyslist: Ref<UnwrapRef<(string | number)[]>> = ref<(string | number)[]>([]);
  const rowSelection = ref({
    checkStrictly: false,
    onChange: (selectedRowKeys: (string | number)[], selectedRows: any) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      selectedRowKeyslist.value = selectedRowKeys;
    },
    onSelect: (record: any, selected: boolean, selectedRows: any) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
      console.log(selected, selectedRows, changeRows);
    },
  });
  const ModalShow = ref(false);
  const detailsRecord = ref({});
  const detailsClick = (record) => {
    ModalShow.value = true;
    detailsRecord.value = record;
  };
  const errorTypeList = ref([
    {
      title: '脚本错误',
      value: '1',
    },
    {
      title: '任务错误',
      value: '2',
    },
    {
      title: '设备错误',
      value: '3',
    },
    {
      title: '系统错误',
      value: '4',
    },
  ]);
  const formState = ref({});
  const statusSelectList = ref([
    {
      title: '正常',
      value: '1',
    },
    {
      title: '异常',
      value: '2',
    },
  ]);
  const taskLogdataSource = ref([
    {
      id: 1,
      name: 'fasdfiennskf12321',
      logType: '设备名1',
      remark: '推特',
      status: 1,
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 2,
      name: 'fasdfiennskf12321',
      logType: '设备名1',
      remark: '推特',
      status: 0,
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 3,
      name: 'fasdfiennskf12321',
      logType: '设备名1',
      remark: '推特',
      status: 2,
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
  ]);
  const taskSeverdataSource = ref([
    {
      id: 1,
      name: 'fasdfiennskf12321',
      deiveName: '设备名1',
      versions: '1.2',
      status: 1,
      reamk: '推特',
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 4,
      name: 'fasdfiennskf12321',
      deiveName: '设备名1',
      versions: '1.2',
      status: 1,
      reamk: '斗鱼',
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 3,
      name: 'fasdfiennskf12321',
      deiveName: '设备名1',
      versions: '1.2',
      status: 1,
      reamk: '百度',
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 2,
      name: 'fasdfiennskf12321',
      deiveName: '设备名1',
      versions: '1.2',
      status: 1,
      reamk: '谷歌',
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
  ]);
  const taskErrordataSource = ref([
    {
      id: 1,
      name: 'fasdfiennskf12321',
      logType: '脚本错误',
      message: '脚本版本过低,请升级脚本',
      status: 1,
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 2,
      name: 'fasdfiennskf12321',
      logType: '任务强制中断',
      message: '用户强制关闭',
      status: 1,
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
    {
      id: 3,
      name: 'fasdfiennskf12321',
      logType: '任务强制中断',
      message: '用户强制重启',
      status: 1,
      end_time: '2025-11-1',
      cread_time: '2025-11-1',
    },
  ]);
  const loading = ref(true);
  const init = () => {
    loading.value = false;
  };
  onMounted(() => {
    init();
  });
</script>
<style scoped lang="scss">
  .status-label {
    width: 100px;
  }
</style>
